<template>
  <section v-if="order">
    <div class="order-details">
      <el-form label-width="100px" size="mini">
        <el-form-item label="店铺：">{{order.data.storeName}}</el-form-item>
        <el-form-item label="创建时间：">{{getTime(order.created)}}</el-form-item>
        <el-form-item label="订单编码：">{{order.sn}}</el-form-item>
        <el-form-item label="订单支付：">
          <el-form label-width="60px" >
            <el-form-item label="总价：">¥{{order.totalFee.toFixed(2)}}</el-form-item>
            <el-form-item label="优惠：">¥{{order.discountFee.toFixed(2)}}</el-form-item>
            <el-form-item label="实付：">¥{{order.payFee.toFixed(2)}}</el-form-item>
          </el-form>
        </el-form-item>
      </el-form>
    </div>
    <div class="operate">
      <el-form inline label-width="50px">
        <el-form-item label="" v-if="order.state === 0">
          <el-button size="mini" @click="goPayEvt" type="success">支付</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
  import toPay from '../payManagement/toPay'
  import batchTool from '@/common/batchTool'
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "orderDetail",
    components:{batchTool},
    props:['orderId'],
    data(){
      return{
        order:null,
      }
    },
    watch:{
      orderId(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      this.init(this.orderId)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(id){
        this.getOrder(id)
      },
      getOrder(id){
        this.fetch({name:"getOrder",data:{id}})
          .then(res=>{
            console.log('看下当前订单-----',res)
            this.order=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getTime(t){
        return dateFormater.formatDatetime(t)
      },
      goPayEvt(){
        this.$emit('toPay',this.order)
      }
    }
  }
</script>

<style scoped>
.operate{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
